/*
 * @Description: 添加朋友页面
 * @Author: Yong
 * @Date: 2021-10-05 21:07:55
 * @LastEditTime: 2021-10-09 23:30:07
 */
import React from "react"
import { RouteComponentProps } from 'react-router-dom'
import H from 'history'

import styles from './index.module.scss'
import { Search, List, Image, Button } from 'antd-mobile'
import { UserService } from '@apis/User'
import { FriendsService } from "@apis/Friends"
const userPhoto = require('@assets/images/defaultPhoto.jpg')

interface Location extends H.Location {
    query: { [key: string]: string }
}

interface IProps extends RouteComponentProps {
    location: Location
}

interface UserListItem {
    ID?: string
    U_Avatar?: string
    U_LoginID?: string
    U_nickName?: string
    state?: number
}
interface IState {
    userList: Array<UserListItem>,
    userInfo?: UserListItem
}

const userState: any = {
    0: '发消息',
    1: '正在申请好友',
    2: '被申请好友'
}

export default class AddFriend extends React.Component<IProps, IState> {

    state: IState = {
        userList: [],
        userInfo: JSON.parse(window.localStorage.getItem('userInfo')) || {}
    }

    async componentDidMount () {
        await this.getUserList()
    }

    // 获取用户列表
    async getUserList (searchName?: string) {
        const { data: { data: list } } = await UserService.searchUser({ searchName: searchName || '', userID: this.state.userInfo.ID })
        this.setState({
            userList: list
        })
    }

    onSearch = (val: string) => {
        this.getUserList(val)
    }

    // 申请好友/发送消息
    addFried = async (item: UserListItem) => {
        if (item.state === 0) {
            // 跳转进入聊天页面 - 发消息
            const friendInfo = {
                ID: item.ID,
                U_Avatar: item.U_Avatar,
                U_LoginID: item.U_LoginID,
                U_nickName: item.U_nickName
            }
            this.props.history.push({ pathname: '/chatRoom', state: { friendInfo } })
        } else {
            // 申请好友
            const res = await FriendsService.applyFriend({ U_UserID: this.state.userInfo.ID, U_FriendID: item.ID })
            console.log(res)
        }
    }

    render () {
        const { userList } = this.state
        return (
            <div className={styles.addFriend}>
                {/* 头部搜索 */}
                <div className={styles.searchBox}>
                    <Search
                        placeholder='请输入用户账号/昵称'
                        onSearch={this.onSearch}
                        showCancelButton
                    />
                </div>
                {/* 用户列表 */}、
                <div className={styles.userList} >
                    <h5>用户</h5>
                    <List>
                        {userList.map((item, index) => (
                            <List.Item
                                key={index}
                                extra={<Button onClick={() => this.addFried(item)}>{userState[item.state] || '加好友'}</Button>}
                                prefix={<Image src={userPhoto} style={{ borderRadius: 20 }} fit='cover' width={40} height={40} />}
                                description={`${item.ID} - 当前项ID`}
                            >
                                {item.U_LoginID}
                            </List.Item>
                        ))}
                    </List>
                </div>
            </div>
        )
    }


}